<template>
	<view>
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<view>
			<qmy-custom-navbar :path="`/qmy_user/user/myPage?usid=${circleDetail.user_id}`"
				:userGender="circleDetail.user_gender"
				:imgUrl="circleDetail.user_avatar|| 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
				:title="circleDetail.user_name || '匿名用户'"></qmy-custom-navbar>
		</view>
		<!-- #endif -->
		<!-- 轮播 -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 8 +'px'}" class="w-100">
			<z-swiper ref="zSwiper" v-model="circleDetail.thumbnail" :options="options" @slideChange="onChange">
				<z-swiper-item v-for="(item,index) in circleDetail.thumbnail" :key="index">
					<image @click="$previewImage(circleDetail.thumbnail,index)" class="w-100 image-height" :src="item"
						mode="aspectFill">
					</image>
				</z-swiper-item>
			</z-swiper>
		</view>
		<!-- 轮播图指示点 -->
		<view class="pos-rela w-100" style="height: 10rpx;">
			<sdp :resdata="circleDetail.thumbnail" :currentIndex="swiperIndex" class="my-sdp pos-abso"></sdp>
		</view>
		<view class="ping-30 bottom-index pos-rela">
			<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/bl.png"
				class="w-100 h-60 pos-abso img-min" />
			<view class="fw-600 fs-32">{{circleDetail.title || ''}}</view>
			<!-- <view class="fs-24 mt-20 col-b1">2-20 10:00</view> -->
			<view class="fs-30 mt-20">
				<mp-html :content="circleDetail.content"></mp-html>
			</view>
			<view v-if="circleDetail.activity_id"
				class="bac-col-fa flex-dir-row flex-x-bet ali-item-cen ping-10 br-20 mt-20">
				<view class="flex-dir-row ali-item-cen pr-10">
					<image class="br-10 image-activity" :src="circleDetail.activity_img[0].src" mode="aspectFill">
					</image>
					<view class="ml-10 flex-1 flex-dir-col">
						<view class="fs-28 text-element-1 ">{{circleDetail.activity_name}}</view>
						<view class="fs-24 col-b1 mt-5">{{circleDetail.sign_up_count}}人已报名活动</view>
					</view>
				</view>
				<view class="border-left fs-28 ping-0-20 whi-sp"
					@click="$NavigateTo(`/pages/detail/detail?id=${circleDetail.activity_id}`)">去报名</view>
			</view>
			<view class="fw-600 fs-30 mt-30">评论（{{commentList.length || 0}})</view>
			<view class="mt-20 pb-20">
				<view v-for="(item, index) in commentList" class="flex-dir-row ali-item-sta mb-30" :key="index"
					:id="'comment-' + item._id" :class="{'comment-flash': isFlashing && targetCommentId === item._id}">
					<!-- 头像 -->
					<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.user_id}`)">
						<qmy-gender-border :gender="item.user_gender"
							:avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
							:avatarWidth="70 + 'rpx'" :avatarHeight="70 + 'rpx'"></qmy-gender-border>
					</view>
					<view class="flex-1 flex-dir-col ml-20">
						<!-- 昵称 -->
						<view class="fs-28 col-87 text-element-1">{{ item.user_name  || '匿名用户'}}</view>
						<!-- 评论内容 -->
						<view class="fs-30 mt-5">
							<view>{{ item.comment_content }}</view>
							<view class="flex-dir-row flex-x-bet ali-item-cen col-b1 mt-5">
								<view class="flex-dir-row ali-item-cen">
									<view class="fs-26 col-b1">{{$timeFormat(item.create_date)}}</view>
									<view @click="reply(item)" class="fs-26 col-87 ml-10 fw-600">回复</view>
								</view>
								<view class="flex-dir-row ali-item-cen">
									<view @click="likeComment(item._id, 0)" class="iconfont fs-44"
										:class="item.like_user_id.includes(userInfo.id) ? 'col-00ba31 ic-nice' : 'col-b1 ic-nice-line'">
									</view>
									<view v-if="item.like_user_id.length" class="fs-30">{{ item.like_user_id.length }}
									</view>
								</view>
							</view>
						</view>
						<!-- 关联评论（折叠显示） -->
						<view v-if="item.new_reply_comment_info && item.new_reply_comment_info.length"
							class="fs-30 mt-20 bg-f6 p-20 br-10 overflow-h">
							<view
								:style="{height: (displayedReplies[item._id] || 1) * commentHeight + 'px', transition: 'height 0.3s ease-in-out'}"
								class="overflow-h">
								<view v-for="(its, i) in item.new_reply_comment_info"
									:class="[{'comment-flash': isFlashing && targetCommentId === its._id}, i === 0 ? 'comment-height' : '']"
									class="flex-dir-row ali-item-sta pb-20" :key="i" :id="'comment-' + its._id">
									<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${its.reply_user_id}`)">
										<qmy-gender-border iconWidth="20rpx" iconHeight="20rpx" iconSize="16rpx"
											iconLineHeight="20rpx" :gender="its.reply_user_gender"
											:avatar="its.reply_user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:avatarWidth="55 + 'rpx'" :avatarHeight="55 + 'rpx'"></qmy-gender-border>
									</view>

									<view class="flex-1 flex-dir-col ml-20">
										<view class="fs-26 col-87 text-element-1 flex-dir-row ali-item-cen">
											<text>{{its.reply_user_name || '匿名用户'}}</text>
											<view v-if="its.displayText" class="flex-dir-row ali-item-cen">
												<text
													class="iconfont ic-arrow_right_fat fs-34 mt-5 ml-5 mr-5 col-b1"></text>
												<text>{{its.displayText}}</text>
											</view>
										</view>
										<view class="fs-30 mt-5">
											<view>{{ its.comment_content }}</view>
											<view class="flex-dir-row flex-x-bet ali-item-cen col-b1 mt-5">
												<view class="flex-dir-row ali-item-cen">
													<view class="fs-26 col-b1">{{$timeFormat(its.create_date)}}</view>
													<view @click="reply(its,item)" class="fs-26 col-87 ml-10 fw-600">回复
													</view>
												</view>
												<view class="flex-dir-row ali-item-cen">
													<view @click="likeComment(its._id, 1)" class="iconfont fs-44"
														:class="its.reply_like_user_id.includes(userInfo.id) ? 'col-00ba31 ic-nice' : 'col-b1 ic-nice-line'">
													</view>
													<view v-if="its.reply_like_user_id.length" class="fs-30">
														{{ its.reply_like_user_id.length }}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 展开/收起按钮 -->
							<view v-if="item.new_reply_comment_info.length > 1"
								class="fs-26 col-87 flex-dir-row ali-item-cen">
								<view v-if="(displayedReplies[item._id] || 1) < item.new_reply_comment_info.length"
									class="flex-dir-row ali-item-cen">
									<view @click="expandReply(item._id, item.new_reply_comment_info.length)">
										<text class="iconfont ic-hengxian1 mr-10"></text>
										<text
											v-if="displayedReplies[item._id]?displayedReplies[item._id] == 1 : !displayedReplies[item._id]">{{`展开${item.new_reply_comment_info.length - (displayedReplies[item._id] || 1)}条回复`}}</text>
										<text v-else class="fw-600">查看更多</text>
										<text class="iconfont ic-shang ml-5 fw-600"></text>
									</view>
									<view @click="retractReply(item._id)"
										v-if="displayedReplies[item._id]?displayedReplies[item._id] > 1 : displayedReplies[item._id]"
										class="ml-30">
										<text class="fw-600">收起</text>
										<text class="iconfont ic-xia fw-600"></text>
									</view>
								</view>
								<text v-else class="fw-600" @click="retractReply(item._id)">收起回复</text>
							</view>

						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入框，动态定位适配输入法高度 -->
		<view class="bor-top-f3 bac-col-f bac-col-f w-100 ping-20 fixed-bottom"
			:class="keyboardHeight == 0 ?'bottom-h':''" :style="{bottom:keyboardHeight+'px'}">
			<view class="flex-dir-row ali-item-cen flex-x-bet">
				<view class="bac-col-fa ping-10-20 br-10 input-container">
					<input class="fs-26 w-100 auto-blur input-style" type="text" @focus="focusChange" @blur="blurChange"
						:adjust-position="false" v-model="commentText" confirm-type="send"
						:placeholder="inputPlaceholder" @confirm="inputComment" :focus="inputFocus" />
				</view>
				<view @click="likeCircle" class="text-ali-c">
					<view class="iconfont fs-50"
						:class="circleDetail.like_user_id && circleDetail.like_user_id.includes(userInfo.id) ? 'col-00ba31 ic-nice' : 'ic-nice-line'">
					</view>
					<view class="fs-26">{{circleDetail.like_user_id && circleDetail.like_user_id.length}}</view>
				</view>
				<view @click="commentCircle" class="text-ali-c">
					<view class="iconfont ic-talk-line fs-50"></view>
					<view class="fs-26">{{commentList.length}}</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="text-ali-c">
					<view class="iconfont ic-share-line fs-50 lh-50"></view>
					<view class="fs-26" style="line-height: 34rpx;">分享</view>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view @click="$Toast('H5暂不开放分享')" class="text-ali-c">
					<view class="iconfont ic-talk-line fs-50"></view>
					<view class="fs-26">{{commentList.length}}</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
	import sdp from '@/components/swiper-dynamic-bullets/swiper-dynamic-bullets.vue';
	export default {
		components: {
			sdp
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				options: {
					initialSlide: 0, //初始显示的图片下标
				},
				swiperIndex: 0, //轮播图下标
				commentText: '', //评论内容
				circleId: 'article001', //圈子id
				circleDetail: {
					_id: 'article001',
					title: '周末户外徒步攻略分享 - 探索城市周边的美丽风景',
					content: `<p>大家好！今天想和大家分享一下我这个周末的户外徒步体验。</p>
					<p><strong>路线介绍：</strong></p>
					<p>这次选择的是城市周边的一条经典徒步路线，全程约8公里，预计用时3-4小时。路线难度适中，非常适合初学者和家庭出行。</p>
					<p><strong>装备推荐：</strong></p>
					<ul>
						<li>舒适的徒步鞋</li>
						<li>轻便背包</li>
						<li>充足的饮用水</li>
						<li>防晒用品</li>
						<li>简单的急救包</li>
					</ul>
					<p><strong>注意事项：</strong></p>
					<p>1. 提前查看天气预报<br/>2. 结伴而行，注意安全<br/>3. 保护环境，不留垃圾<br/>4. 合理安排时间</p>
					<p>希望这次分享对大家有帮助，期待更多朋友加入户外运动的行列！</p>`,
					thumbnail: [
						'https://picsum.photos/800/600?random=20',
						'https://picsum.photos/800/600?random=21',
						'https://picsum.photos/800/600?random=22',
						'https://picsum.photos/800/600?random=23'
					],
					user_id: 'user001',
					user_name: '户外达人小李',
					user_gender: 1,
					user_avatar: 'https://picsum.photos/200/200?random=25',
					like_user_id: ['user002', 'user003', 'user004', 'user005'],
					activity_id: 'activity001',
					activity_name: '周末户外徒步活动',
					activity_img: [{
						src: 'https://picsum.photos/200/200?random=26'
					}],
					sign_up_count: 28
				}, //圈子详情
				commentList: [
					{
						_id: 'comment001',
						user_id: 'user006',
						user_name: '山野行者',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=30',
						comment_content: '非常详细的攻略！我也经常走这条线路，确实很适合新手。特别是装备推荐部分很实用。',
						create_date: Date.now() - 1800000, // 30分钟前
						like_user_id: ['user001', 'user007'],
						new_reply_comment_info: [
							{
								_id: 'reply001',
								reply_comment_id: 'comment001',
								reply_user_id: 'user001',
								reply_user_name: '户外达人小李',
								reply_user_gender: 1,
								reply_user_avatar: 'https://picsum.photos/200/200?random=25',
								comment_content: '谢谢支持！希望能和你一起组织更多户外活动',
								create_date: Date.now() - 1500000, // 25分钟前
								reply_like_user_id: ['user006'],
								displayText: ''
							},
							{
								_id: 'reply002',
								reply_comment_id: 'reply001',
								reply_user_id: 'user008',
								reply_user_name: '新手小白',
								reply_user_gender: 1,
								reply_user_avatar: 'https://picsum.photos/200/200?random=31',
								comment_content: '我也想参加，能带带新人吗？',
								create_date: Date.now() - 1200000, // 20分钟前
								reply_like_user_id: [],
								displayText: '户外达人小李'
							}
						]
					},
					{
						_id: 'comment002',
						user_id: 'user009',
						user_name: '风景摄影师',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=32',
						comment_content: '照片拍得真不错！这个角度很棒，请问具体是在哪个位置拍的？',
						create_date: Date.now() - 3600000, // 1小时前
						like_user_id: ['user001', 'user010', 'user011'],
						new_reply_comment_info: []
					},
					{
						_id: 'comment003',
						user_id: 'user012',
						user_name: '户外新人',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=33',
						comment_content: '第一次看到这么详细的徒步攻略，收藏了！想问一下，这条路线适合带小朋友吗？',
						create_date: Date.now() - 5400000, // 1.5小时前
						like_user_id: ['user013'],
						new_reply_comment_info: [
							{
								_id: 'reply003',
								reply_comment_id: 'comment003',
								reply_user_id: 'user001',
								reply_user_name: '户外达人小李',
								reply_user_gender: 1,
								reply_user_avatar: 'https://picsum.photos/200/200?random=25',
								comment_content: '这条路线比较平缓，8岁以上的小朋友应该没问题，不过要注意安全哦',
								create_date: Date.now() - 4800000, // 1小时20分前
								reply_like_user_id: ['user012', 'user014'],
								displayText: ''
							}
						]
					},
					{
						_id: 'comment004',
						user_id: 'user015',
						user_name: '装备控',
						user_gender: 1,
						user_avatar: 'https://picsum.photos/200/200?random=34',
						comment_content: '装备推荐很到位！我补充一点，建议带个登山杖，对膝盖保护很有帮助。',
						create_date: Date.now() - 7200000, // 2小时前
						like_user_id: ['user001', 'user016'],
						new_reply_comment_info: []
					},
					{
						_id: 'comment005',
						user_id: 'user017',
						user_name: '环保志愿者',
						user_gender: 2,
						user_avatar: 'https://picsum.photos/200/200?random=35',
						comment_content: '感谢提醒大家保护环境！希望每个户外爱好者都能做到不留垃圾，保护我们美丽的自然环境。',
						create_date: Date.now() - 9000000, // 2.5小时前
						like_user_id: ['user001', 'user018', 'user019', 'user020'],
						new_reply_comment_info: [
							{
								_id: 'reply004',
								reply_comment_id: 'comment005',
								reply_user_id: 'user021',
								reply_user_name: '自然守护者',
								reply_user_gender: 1,
								reply_user_avatar: 'https://picsum.photos/200/200?random=36',
								comment_content: '说得太对了！我们每次户外都会带垃圾袋，不仅收拾自己的，还会捡拾路上的垃圾',
								create_date: Date.now() - 8400000, // 2小时20分前
								reply_like_user_id: ['user017', 'user001'],
								displayText: ''
							},
							{
								_id: 'reply005',
								reply_comment_id: 'reply004',
								reply_user_id: 'user001',
								reply_user_name: '户外达人小李',
								reply_user_gender: 1,
								reply_user_avatar: 'https://picsum.photos/200/200?random=25',
								comment_content: '为你们点赞！这就是户外精神的体现',
								create_date: Date.now() - 8100000, // 2小时15分前
								reply_like_user_id: ['user021', 'user017'],
								displayText: '自然守护者'
							}
						]
					}
				], //评论列表
				replyCommentType: 0, //回复的评论类型，0表示评论圈子，1表示回复评论
				inputPlaceholder: '和大家一起聊聊吧...', //输入框提示
				inputFocus: false, //输入框是否聚焦
				replyCommentId: '', //回复的评论id
				showAllReply: {}, // 记录每个评论是否展开关联评论
				commentHeight: 0, // 存储获取到的高度
				displayedReplies: {}, // 每个 item 显示的评论数量
				keyboardHeight: 0, // 键盘高度
				dataLoaded: true, //数据加载完成
				superlativeId: '', //最高级评论id
				targetCommentId: '', // 目标评论id
				isFlashing: false, // 是否正在闪烁
				isCommentPosition: false, // 是否定位过评论位置状态
			}
		},
		computed: {
			userInfo() {
				// 返回写死的用户信息用于测试
				return {
					id: 'current_user',
					name: '测试用户',
					avatar: 'https://picsum.photos/200/200?random=100'
				}
				// return store.userInfo //用户信息
			},
		},
		onLoad(e) {
			this.circleId = e.id || 'article001';
			this.targetCommentId = e.commentId; // 获取目标评论id
			// 使用写死的数据，注释掉API调用
			// this.getCircleDetail();
			// this.getComment();
			
			// 模拟数据加载完成后的处理
			this.$nextTick(() => {
				this.commentList = this.commentListProcessed();
				this.getCommentHeight();
				if (this.targetCommentId && !this.isCommentPosition) {
					this.isCommentPosition = true;
					setTimeout(() => {
						this.scrollToComment();
					}, 500);
				}
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 模拟刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			}, 1000);
		},
		methods: {
			//图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.circleDetail.thumbnail,
					current: index
				});
			},
			//获取圈子详情（已使用写死数据）
			getCircleDetail() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的文章详情数据');
			},
			//获取评论（已使用写死数据）
			getComment() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的评论数据');
			},
			// 获取单条评论的高度
			getCommentHeight() {
				uni.createSelectorQuery()
					.select(".comment-height")
					.boundingClientRect((res) => {
						if (res) {
							this.commentHeight = res.height;
						}
					})
					.exec();
			},

			// 展开/收起评论
			toggleReply(commentId, totalCount) {
				// 震动
				uni.vibrateShort();
				if (!this.displayedReplies[commentId]) {
					// 默认显示 1 条
					this.$set(this.displayedReplies, commentId, 1);
				}

				if (this.displayedReplies[commentId] < totalCount) {
					// 每次增加 10 条
					this.displayedReplies[commentId] = Math.min(this.displayedReplies[commentId] + 10, totalCount);
				} else {
					// 已经全部展开 -> 重新折叠回 1 条
					this.displayedReplies[commentId] = 1;
				}
			},
			//展开回复
			expandReply(commentId, totalCount) {
				this.toggleReply(commentId, totalCount);
			},
			//收起回复
			retractReply(commentId) {
				this.toggleReply(commentId);
			},
			//点赞圈子
			likeCircle(id) {
				this.$debounce(() => {
					// 震动
					uni.vibrateShort();
					// 更新点赞状态
					if (this.circleDetail.like_user_id.includes(this.userInfo.id)) {
						// 取消点赞
						const index = this.circleDetail.like_user_id.indexOf(this.userInfo.id);
						this.circleDetail.like_user_id.splice(index, 1);
						uni.showToast({
							title: '取消点赞',
							icon: 'success'
						});
					} else {
						// 点赞
						this.circleDetail.like_user_id.push(this.userInfo.id);
						uni.showToast({
							title: '点赞成功',
							icon: 'success'
						});
					}
				}, 500, true, "likeCircle")
			},
			//轮播图
			onChange(swiper, index) {
				this.swiperIndex = index
			},
			//输入框
			inputComment() {
				if (this.replyCommentType == 1) {
					// 模拟回复评论
					if (!this.commentText.trim()) {
						return uni.showToast({
							title: '请输入回复内容',
							icon: 'none'
						});
					}
					
					const newReply = {
						_id: 'reply_' + Date.now(),
						reply_comment_id: this.replyCommentId,
						reply_user_id: this.userInfo.id,
						reply_user_name: this.userInfo.name,
						reply_user_gender: 1,
						reply_user_avatar: this.userInfo.avatar,
						comment_content: this.commentText,
						create_date: Date.now(),
						reply_like_user_id: [],
						displayText: ''
					};
					
					// 找到对应的评论并添加回复
					this.commentList.forEach(comment => {
						if (comment._id === this.replyCommentId) {
							comment.new_reply_comment_info.push(newReply);
						}
					});
					
					uni.showToast({
						title: '回复成功',
						icon: 'success'
					});
					this.resetInput();
				} else {
					this.comment();
				}
			},
			// 输入框获取焦点触发
			focusChange(e) {
				this.keyboardHeight = e.detail.height;
			},
			// 输入框失去焦点触发
			blurChange() {
				this.keyboardHeight = 0;
				this.resetInput();
			},
			//恢复输入框
			resetInput() {
				this.replyCommentType = 0;
				this.commentText = '';
				this.inputPlaceholder = '和大家一起聊聊吧...';
				this.inputFocus = false
			},
			//评论
			comment() {
				if (!this.commentText.trim()) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
				}
				
				// 模拟添加评论
				const newComment = {
					_id: 'comment_' + Date.now(),
					user_id: this.userInfo.id,
					user_name: this.userInfo.name,
					user_gender: 1,
					user_avatar: this.userInfo.avatar,
					comment_content: this.commentText,
					create_date: Date.now(),
					like_user_id: [],
					new_reply_comment_info: []
				};
				
				this.commentList.unshift(newComment);
				
				uni.showToast({
					title: '评论成功',
					icon: 'success'
				});
				this.resetInput();
			},
			// 点赞评论
			likeComment(id, type) {
				this.$debounce(() => {
					// 震动
					uni.vibrateShort();
					// 更新点赞状态
					this.commentList.forEach(item => {
						if (type == 0) {
							// 主评论点赞
							if (item._id == id) {
								if (item.like_user_id.includes(this.userInfo.id)) {
									// 取消点赞
									const index = item.like_user_id.indexOf(this.userInfo.id);
									item.like_user_id.splice(index, 1);
								} else {
									// 点赞
									item.like_user_id.push(this.userInfo.id);
								}
							}
						} else {
							// 回复评论点赞
							item.new_reply_comment_info.forEach(its => {
								if (its._id == id) {
									if (its.reply_like_user_id.includes(this.userInfo.id)) {
										// 取消点赞
										const index = its.reply_like_user_id.indexOf(this.userInfo.id);
										its.reply_like_user_id.splice(index, 1);
									} else {
										// 点赞
										its.reply_like_user_id.push(this.userInfo.id);
									}
								}
							});
						}
					});
				}, 500, true, "likeComment")
			},
			// 回复评论
			reply(item, its) {
				this.superlativeId = its?._id || item._id;
				this.replyCommentId = item._id;
				this.inputPlaceholder = `回复@${item.user_name || item.reply_user_name || '匿名用户'}:`;
				this.replyCommentType = 1;
				this.inputFocus = true;
			},
			// 评论圈子
			commentCircle() {
				this.replyCommentId = '';
				this.inputPlaceholder = '和大家一起聊聊吧...';
				this.replyCommentType = 0;
				this.inputFocus = true;
			},
			commentListProcessed() {
				return this.commentList.map(comment => {
					// 1. 先筛选出 reply_comment_id 不等于主评论 _id 的数据
					let replyList = comment.new_reply_comment_info.map(reply => ({
						...reply,
						displayText: ''
					}));
					// 2. 从关联评论里找到匹配的 reply_comment_id 并填充 displayText
					replyList.forEach(reply => {
						if (reply.reply_comment_id !== comment._id) {
							let repliedTo = replyList.find(item => item._id === reply.reply_comment_id);
							if (repliedTo) {
								reply.displayText =
									`${repliedTo.reply_user_name || '匿名用户'}`;
							}
						}
					});

					return {
						...comment,
						new_reply_comment_info: replyList
					};
				});
			},
			// 定位到指定评论
			scrollToComment() {
				if (!this.targetCommentId) return;

				// 先展开包含目标评论的关联评论列表
				this.expandTargetReply();

				// 等待展开动画完成后再滚动
				setTimeout(() => {
					// 查找目标评论元素
					const query = uni.createSelectorQuery();
					query.select(`#comment-${this.targetCommentId}`).boundingClientRect();
					query.selectViewport().scrollOffset();
					query.exec((res) => {
						if (res[0]) {
							// 计算需要滚动的距离，考虑顶部导航栏高度
							const scrollTop = res[0].top + res[1].scrollTop - (this.menuObject ? (this
								.menuObject.height + this.menuObject.top + 8) : 0);

							// 滚动到目标位置
							uni.pageScrollTo({
								scrollTop: scrollTop,
								duration: 300
							});

							// 添加闪烁效果
							this.flashComment(this.targetCommentId);
						}
					});
				}, 350); // 等待展开动画完成
			},

			// 展开包含目标评论的关联评论列表
			expandTargetReply() {
				// 遍历评论列表找到包含目标评论的主评论
				this.commentList.forEach(comment => {
					// 检查是否是主评论本身
					if (comment._id === this.targetCommentId) {
						return; // 如果是主评论，不需要展开
					}

					// 检查是否在关联评论中
					const replyComment = comment.new_reply_comment_info.find(reply => reply._id === this
						.targetCommentId);
					if (replyComment) {
						// 找到包含目标评论的主评论，展开全部关联评论
						this.$set(this.displayedReplies, comment._id, comment.new_reply_comment_info.length);
					}
				});
			},

			// 闪烁效果
			flashComment(commentId) {
				this.isFlashing = true;
				let count = 0;
				const flash = setInterval(() => {
					count++;
					if (count > 3) {
						clearInterval(flash);
						this.isFlashing = false;
					}
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	.my-sdp {
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.image-height {
		height: 900rpx;
	}

	.image-activity {
		width: 90rpx;
		height: 90rpx;
	}

	.image-small {
		width: 70rpx;
		height: 70rpx;
	}

	.image-small-2 {
		width: 45rpx;
		height: 45rpx;
	}

	.border-left {
		border-left: 1rpx solid #bababa;
	}

	.input-container {
		width: 400rpx;
	}

	.input-style {
		height: 50rpx;
	}

	.fixed-bottom {
		position: fixed;
		left: 0;
		z-index: 999;
		transition: bottom 0.2s ease-in-out;
	}

	button {
		background-color: #ffffff00;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 0rpx !important;
	}

	.img-min {
		top: -60rpx;
		left: 0;
		z-index: 1;
		height: 60rpx;
	}

	@keyframes flash {
		0% {
			background-color: transparent;
		}

		50% {
			background-color: rgba(176, 176, 176, 0.1);
		}

		100% {
			background-color: transparent;
		}
	}

	.comment-flash {
		animation: flash 0.5s ease-in-out infinite;
		border-radius: 12rpx;
	}
</style>
